<template>
  <div class="playReMain">
    <div class="title">
      <p @click="()=>{$router.go(-1)}">参赛评委报名</p>
      <i
        class="iconfont icon-left"
        style="position:absolute;left:10px;top:10px;font-size:14px"
        @click="()=>{$router.go(-1)}"
      ></i>
    </div>
    <titleImage />
    <div class="formSty">
      <span class="from_title">赛区评委报名</span>
      <div class="fromContent">
        <p>选择赛区</p>
        <div class="selectSty">
          <select name id v-model="province">
            <option
              v-bind:value="list.name"
              v-for="(list,index) in province_list"
              :key="index"
            >{{list.text}}</option>
          </select>
          <select name id v-model="city">
            <option
              v-bind:value="list.name"
              v-for="(list,index) in city_list"
              :key="index"
            >{{list.text}}</option>
          </select>
          <select name id v-model="county">
            <option
              v-bind:value="list.name"
              v-for="(list,index) in county_list"
              :key="index"
            >{{list.text}}</option>
          </select>
        </div>
        <div class="fromInput">
          <van-cell-group>
            <van-field
              class="textInput"
              v-for="(item,index) in fromItem"
              :key="index"
              v-model="item.value"
              :placeholder="item.lable"
              :type="item.type"
              clickable
              :readonly="item.readonly"
              @click="genderDialog(index)"
            >
              <i slot="left-icon" :class="['iconfont',item.icon]"></i>
            </van-field>
          </van-cell-group>
        </div>
        <div class="videoUploadSty">
          <p>上传参赛照片</p>
          <van-uploader v-model="fileList" :after-read="afterRead" multiple :max-count="1" />
        </div>
        <van-field
          class="bottomMessage"
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入个人履历"
          show-word-limit
        />
      </div>
      <van-button class="submitButton" @click="apply()">确认报名</van-button>
    </div>
    <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>
<script>
import titleImage from "../../../../components/component/titleImg.vue";
export default {
  components: {
    titleImage
  },
  data: () => ({
    message: "",
    showPicker: false,
    columns: ["男", "女"],
    fileList: [],
    videoMsg: "上传作品",
    province: "a",
    city: "a",
    county: "a",
    province_list: [{ text: "省份", name: "a" }],
    city_list: [{ text: "城市", name: "a" }],
    county_list: [{ text: "地区", name: "a" }],

    fromItem: [
      {
        lable: "请输入您的姓名",
        icon: "icon-xingmingyonghumingnicheng",
        value: ""
      },
      {
        lable: "请输入您的手机号",
        icon: "icon-shouji-copy",
        type: "digit",
        value: ""
      },
      {
        lable: "请输入您的身份证号",
        icon: "icon-shenfenzhenghao",
        type: "digit",
        value: ""
      },
      {
        lable: "请输入您的工作单位或学校名称",
        icon: "icon-gongzuodanwei",
        value: ""
      },
      {
        lable: "请输入您的邮箱",
        icon: "icon-youxiang",
        value: ""
      },
      {
        lable: "性别",
        icon: "icon-xingbie",
        value: "",
        readonly: true
      },
      {
        lable: "推荐人",
        icon: "icon-tj",
        value: ""
      },
      {
        lable: "请输入您的职业",
        icon: "icon-zhiye",
        value: ""
      },
      {
        lable: "请输入您的演唱风格",
        icon: "icon-fengge",
        value: ""
      },
      {
        lable: "请输入您的抖音号/快手号",
        icon: "icon-douyinhao",
        type: "digit",
        value: ""
      },
      {
        lable: "请输入您的粉丝数量",
        icon: "icon-leijifensishuliang",
        type: "digit",
        value: ""
      }
    ]
  }),
  mounted() {
    this.$axios.getCity(`ym/syscity/get-area-list?parentId=0`).then(res => {
      console.log(res);
      res.extend.province_list.forEach(list => {
        this.province_list.push({
          text: list.name,
          name: list.id
        });
      });
    });
  },
  watch: {
    province(newV, oldV) {
      console.log(newV, oldV);
      this.$axios
        .getCity(`ym/syscity/get-area-list?parentId=${newV}`)
        .then(res => {
          this.city_list = [];
          res.extend.province_list.forEach(list => {
            this.city_list.push({
              text: list.name,
              name: list.id
            });
          });
        });
    },
    city(newV) {
      this.$axios
        .getCity(`ym/syscity/get-area-list?parentId=${newV}`)
        .then(res => {
          this.county_list = [];
          res.extend.province_list.forEach(list => {
            this.county_list.push({
              text: list.name,
              name: list.id
            });
          });
        });
    }
  },
  methods: {
    genderDialog(i) {
      if (i === 5) {
        this.showPicker = true;
      }
    },
    onConfirm(value) {
      this.fromItem[5].value = value;
      this.showPicker = false;
    },
    findKey(obj, value) {
      return obj.find(element => element.name == value);
    },
    afterRead(e) {
      console.log(e);
      let param = new FormData();
      param.append("files", e.file);
      this.$axios
        .noJurisdictionPost(`ym/public/upload-image`, param)
        .then(res => {
          if (res.data.code === 0) {
            this.fileList[0] = res.data.data[0].imgSrc;
          }
        });
    },
    apply() {
      console.log(this.fromItem);
      var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
      var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
      if (telStr.test(this.fromItem[1].value)) {
        if (reg.test(this.fromItem[4].value)) {
          let data = {
            province: this.findKey(this.province_list, this.province).text,
            city: this.findKey(this.city_list, this.city).text,
            district: this.findKey(this.county_list, this.county).text,
            name: this.fromItem[0].value,
            phone: this.fromItem[1].value,
            email: this.fromItem[4].value,
            idcard: this.fromItem[2].value,
            sex: this.fromItem[5].value,
            recommend: this.fromItem[6].value,
            style: this.fromItem[7].value,
            platformAccount: this.fromItem[9].value,
            fansNum: this.fromItem[10].value,
            img: this.fileList[0],
            desc: this.message
          };
          console.log(data);
          this.$axios
            .noJurisdictionPost(`ym/singer/mentor-sign`, data)
            .then(res => {
              if (res.data.code === 0) {
                this.$Toast("报名成功!");
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              } else {
                this.$Toast(res.data.msg);
              }
            });
        } else {
          this.$Toast("邮箱输入有误，请检查后重试！");
        }
      } else {
        this.$Toast("手机号输入有误，请检查后重试！");
      }
    }
  }
};
</script>
<style lang="scss">
.playReMain {
  margin: 0;
  padding: 0;
  position: absolute;
  min-height: 100%;
  width: 100%;
  color: #fff;
  background: #ffcd5b;
  .title {
    background: #ffaf03;
    p {
      text-align: center;
      margin: 0;
      height: 40px;
      line-height: 40px;
    }
  }
  .formSty {
    width: 92%;
    margin: 20px auto;
    padding-bottom: 10px;
    background: #fff1d2;
    border-radius: 6px;
    .from_title {
      display: inline-block;
      padding: 6px;
      background: #ffaf03;
      width: 100px;
      border-radius: 0 24px 24px 0;
      font-size: 14px;
      margin: 20px 0 0 -20px;
      color: #5c4b28;
    }
    .fromContent {
      p {
        color: #333;
        text-align: left;
        font-size: 12px;
        padding: 14px 6px;
      }
      .selectSty {
        display: flex;
        justify-content: center;
        align-items: center;
        select {
          width: 30%;
          text-align: center;
          background: #ffe8b5;
          border: none;
          height: 28px;
          margin: 0 2px;
          option {
            text-align: center;
          }
        }
      }
      .fromInput {
        padding: 4px 0;
        .textInput {
          width: 90%;
          background: #ffe8b5;
          border-radius: 4px;
          padding: 6px;
          margin: 6px auto;
        }
      }
    }
    .videoUploadSty {
      p {
        margin: 0;
        padding: 0;
        color: #333;
      }
      display: flex;
      flex-direction: column;
      padding: 0 15px;
    }
    .bottomMessage {
      width: 92%;
      color: #ffe8b5;
      margin: 0 auto;
    }
    .submitButton {
      display: block;
      width: 60%;
      margin: 40px auto;
      background: #ffaf03;
      border-radius: 30px;
      color: #fff;
    }
  }
}
.van-cell-group {
  background: #fff1d2;
}
.van-hairline--top-bottom {
  background: #fff1d2;
}
</style>